<template>
	<view>
		<hx-navbar  :border="false" :fixed="true" transparent="hidden"
			  height="140rpx">
			<view style="text-align: left;width: 100%;font-weight: 700;"><text><text v-if="from === 'pre'">修改</text><text v-else>新增</text>收获地址</text></view>
			
		</hx-navbar>
		
		<view style="background: linear-gradient(189.08deg, #DBF9F1 0%, rgba(219, 249, 241, 0) 36.82%), #FFFFFF;;height:256rpx;width: 100%;position: absolute;top: 0;"></view>
		<view class="content">
			<view class="row">
				<text class="tit">联系人</text>
				<input class="input" type="text" @input="nameInput" placeholder="收货人姓名" placeholder-class="placeholder"
					:value="addressData.name" />
			</view>
			<view class="row b-b">
				<text class="tit">手机号</text>
				<input class="input" type="number" @input="numberInput" placeholder="收货人手机号码"
					placeholder-class="placeholder" :value="addressData.mobile" />
			</view> 
			<view class="row" @click="showSchoolNumberPopup">
				<text class="tit">校区选择</text>
				<!-- 缺少校区记录字段，暂定为ampus -->
				<view class="text-lg text-gray" >
					{{addressData.schoolName==undefined?chooseSchool:addressData.schoolName}}</view>
				<view style="flex:1; text-align: end;"><u-icon name="arrow-right" color="rgba(178, 176, 176, 1)"></u-icon></view>
			</view>
			<view class="row" @click="showNumberPopup">
				<text class="tit">楼栋号</text>
				<view class="text-lg text-gray" >
					{{addressData.addressName==''?chooseLoudong:addressData.addressName}}</view>
				<view style="flex:1; text-align: end;"><u-icon name="arrow-right" color="rgba(178, 176, 176, 1)"></u-icon></view>
			</view>
			<view class="row">
				<text class="tit">寝室号</text>
				<input class="input" @input="areaInput" type="number" placeholder="门牌（送上楼必填）"
					placeholder-class="placeholder" :value="addressData.area" />
			</view>
			<view class="row isDefault-row"><text class="tit">设为默认</text>
				<u-switch v-model="addressData.isDefault" @change="postStatus"></u-switch>
			</view>
			<view class="login__info__item__button tn-cool-bg-color-15--reverse" hover-class="tn-hover"
				:hover-stay-time="150" @tap="confirm"
				@click="toAddressManagePage" >保存地址</view>
			<!-- <button class="add-btn" @tap="confirm">提交</button> -->
		</view>
		<!-- //消息弹窗 -->
		<u-toast ref="uToast" />
		<u-picker mode="selector" @confirm="radioChange" v-model="showSchoolNumber" :isDefault-selector="[0]"
			:range="selectorSchoolNumber"></u-picker>
		<u-picker mode="selector" @confirm="NumberConfirm" v-model="showNumber" :isDefault-selector="[0]"
			:range="selectorNumber"></u-picker>
		
		<!-- <u-picker mode="selector" @confirm="NumberConfirm" v-model="showNumber" :isDefault-selector="[0]"
			:range="selectorNumber"></u-picker>
			<u-picker mode="selector" @confirm="radioChange" v-model="show" :isDefault-selector="[0]"
				:range="addresslist2"></u-picker> -->
	</view>
</template>

<script>
	const db = uniCloud.database()
	export default {
		data() {
			return {
				id: '',
				currentplace:'',
				school:-1,
				addresslist: [{
						name: '中南大学南校区',
						disabled: false
					}
					,{
						name: '中南大学本部校区',
						disabled: false
					},{
						name: '湖南大学财经校区',
						disabled: false
					}
				],
				addresslist2:['中南大学南校区','中南大学本部校区','湖南大学财经校区'],
				chooseLoudong: '点击选择楼栋',
				chooseSchool:'点击选择校区',
				userinfo: {},
				openid: '',
				showNumber: false,
				showSchoolNumber: false,
				selectorNumber:[],
				selectorSchoolNumber:[],
				selectorNumberCai:['A栋a分区','A栋b分区','A栋c分区'],
				selectorNumberBen:['本部3舍','本部15舍','本部桃花公寓A','本部桃花公寓B','本部桃花公寓C'],
				selectorNumberNan: ['升华公寓34栋','升华公寓35栋','升华公寓8栋','升华公寓9栋','升华公寓17栋','升华公寓南八舍','升华公寓南六舍','升华公寓南五舍','升华公寓19栋','升华公寓2栋','升华公寓3栋','升华公寓4栋','升华公寓1栋北','升华公寓1栋南','升华公寓25栋','升华公寓12栋','升华公寓13栋','升华公寓24栋','升华公寓27栋','升华公寓28栋南','升华公寓28栋北','升华公寓20栋','升华公寓29栋','升华公寓14栋','升华公寓26栋', '升华公寓31栋', '升华公寓21栋', '升华公寓16栋', '升华公寓15栋', '升华公寓32栋', '升华公寓33栋', '升华公寓30栋'],
				addressData: {
					name: '',
					school:-1,
					schoolName:"",
					mobile: '',
					addressName: '',
					area: '',
					isDefault: false,
					from:'',
				},
			}
		},
		onLoad(options) {
			console.log(options.from)
			let that = this;
			that.openid = options.openid
			that.from = options.from
			//请求校区
			db.collection("school").get()
			.then((res)=>{
				that.addresslist = res.result.data
				for (var i = 0; i < that.addresslist.length; i++) {
					that.selectorSchoolNumber.push(that.addresslist[i].data.schoolName)
				}
				console.log("校区",that.addresslist[0].data.schoolName)
			})
			//获取修改的id
			if (options.id != undefined) {
				console.log("修改", options.id);
				that.id = options.id;
				that.setAddress(options.id);
			}
		},
		methods: {
			showSchoolNumberPopup() {
				this.showSchoolNumber = true;
			},
			showNumberPopup() {
				if(this.addressData.school==-1){
					uni.showModal({
						title:"请先选择校区哦~",
						success() {
							return
						}
					})
					return
				}else{
					this.showNumber = true;
				}
			},
			SchoolConfirm(e) {
				this.selectorNumber = []
				this.chooseLoudong = "请选择楼栋"
				this.addressData.addressName = '';
				this.chooseSchool = this.selectorNumber[Number(e)];
				this.addressData.school = this.addresslist[Number(e)].data.school;
				this.addressData.schoolName = this.addresslist[Number(e)].data.schoolName;
				console.log('你选择的楼栋：',this.addressData.school  )
				for (var i = 0; i < this.addresslist[Number(e)].data.louList.length; i++) {
					this.selectorNumber.push(this.addresslist[Number(e)].data.louList[i].name)
				}
			},
			NumberConfirm(e) {
				console.log('你选择的楼栋：', )
				this.chooseLoudong = this.selectorNumber[Number(e)];
				this.addressData.addressName = this.chooseLoudong;
				console.log('你选择的楼栋', this.addressData.addressName);
			},
			radioChange(e) {
				console.log(Number(e));
				this.choose = this.addresslist2[Number(e)]
				if (this.choose == '中南大学南校区') {
					this.school = 0
					this.selectorNumber = this.selectorNumberNan
				}else if(this.choose == '中南大学本部校区'){
					this.school = 1 
					this.selectorNumber = this.selectorNumberBen
				}else{
					this.school = 2
					this.selectorNumber = this.selectorNumberCai
				}
			},
			showCampus(){
				this.show=true
			},
			// 填充修改数据
			setAddress(id) {
				let that = this;
				//开始请求地址信息，并填充
				uni.request({
					url:"https://zback.shixiaozhu.work/ShixiaozhuTest/address/getAddressByid?addressId="+ id,
					success(res) {
						if(res.data.status==200){
							console.log(res.data.data)
							that.addressData = res.data.data;
							that.addressData.name = that.addressData.username
							if(res.data.data.isDefault==0){
								that.addressData.isDefault = false
							}else{
								that.addressData.isDefault = true
							}
						}else{
							that.$refs.uToast.show({
								title: '网络出错啦！',
								type: 'error'
							});
						}
					}
				})
			},
			// 检测输入框---------------------------
			nameInput(e) {
				this.addressData.name = e.detail.value;
				console.log(e.detail.value)
			},
			// 电话---------------------------------
			numberInput(e) {
				this.addressData.mobile = e.detail.value;
				// 同步信息流---------------------------
				console.log(e.detail.value)
			},
			// 地区---------------------------------
			areaInput(e) {
				this.addressData.area = e.detail.value;
				// 同步信息流---------------------------
				console.log(e.detail.value)
			},
			// 是否默认地址---------------------------
			postStatus(e) {
				this.addressData.isDefault = e;
				// 同步信息流---------------------------	
				console.log(this.addressData.isDefault?1:0);
			},
			deleteLocation: function(e) {
				this.addressData.addressName = "";
			},
			//提交
			confirm: function confirm() {
				let that = this
				if (!this.addressData.name) {
					this.$refs.uToast.show({
						title: '请填写收货人姓名',
						type: 'error'
					});
					return;
				}
				if(this.school==-1){
					this.$refs.uToast.show({
						title: '请选择校区',
						type: 'error'
					});
					return;
				}
				if (!/(^1[3|4|5|6|7|8|9][0-9]{9}$)/.test(this.addressData.mobile)) {
					this.$refs.uToast.show({
						title: '请输入正确的手机号码',
						type: 'error'
					});
					return;
				}
				if (that.addressData.addressName==undefined||that.addressData.addressName == "") {
					this.$refs.uToast.show({
						title: '请先选择楼栋号',
						type: 'error'
					});
					return;
				}
				if (!this.addressData.area) {
					this.$refs.uToast.show({
						title: '请填写门牌号信息',
						type: 'error'
					});
					return;
				}
				// 添加到数据库
				if (this.id == '') {
					//进行新增地址操作
					uni.request({
						url:"https://zback.shixiaozhu.work/ShixiaozhuTest/address/setAddress",
						data:{
							"username":that.addressData.name,
							"mobile":that.addressData.mobile,
							"addressName":that.addressData.addressName,
							"area":that.addressData.area,
							"isDefault":that.addressData.isDefault?1:0,
							"openid":that.openid,
							"school":that.school
						},
						success(res) {
							if(res.data.status==200){
								that.$refs.uToast.show({
									title: '新增成功',
									type: 'success'
								});
								setTimeout(function() {
									uni.navigateBack();
								}, 800);
							}else{
								that.$refs.uToast.show({
									title: '网络错误，请重试',
									type: 'error'
								});
								setTimeout(function() {
									uni.navigateBack();
								}, 800);
							}
						}
					})
				} else {
					//进行修改
					uni.request({
						url:"https://zback.shixiaozhu.work/ShixiaozhuTest/address/updateAddress",
						data:{
							"id":that.id,
							"username":that.addressData.name,
							"mobile":that.addressData.mobile,
							"addressName":that.addressData.addressName,
							"area":that.addressData.area,
							"isDefault":that.addressData.isDefault?1:0,
							"openid":that.openid
						},
						success(res) {
							if(res.data.status==200){
								that.$refs.uToast.show({
									title: '修改成功',
									type: 'success'
								});
								setTimeout(function() {
									uni.navigateBack();
								}, 800);
							}else{
								that.$refs.uToast.show({
									title: '网络错误，请重试',
									type: 'error'
								});
								setTimeout(function() {
									uni.navigateBack();
								}, 800);
							}
						}
					})
				}
			},
		}
	}
</script>

<style lang="scss">
	page {
		background: #fff;
	}
	.login__info__item__button {
		margin: 60rpx auto;
		width: 92%;
		height: 100rpx;
		line-height: 100rpx;
		// padding: 10rpx;
		border-radius: 14rpx;
		text-align: center;
		font-size: 32rpx;
		font-weight: bold;
		// justify-content: center;
		// align-items: center;
		margin-bottom: 20rpx;
		background: linear-gradient(104.97deg, #FC9A8D 27.17%, #FDDBB4 107.39%);
		box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.1);
	}
	

	.content {
		position: relative;
		border-top: 1rpx solid rgba(217, 217, 217, 1);
		border-radius: 16rpx 16rpx 0 0 ;
		overflow: hidden;
	}

	.row {
		display: -webkit-box;
		display: -webkit-flex;
		display: flex;
		-webkit-box-align: center;
		-webkit-align-items: center;
		align-items: center;
		position: relative;
		margin: 0 24rpx;
		padding-left: 16rpx;
		height: 128rpx;
		background: #fff;
		border-bottom:1rpx solid rgba(217, 217, 217, 1);
		
	}

	.row .tit {
		-webkit-flex-shrink: 0;
		flex-shrink: 0;
		width: 160rpx;
		font-size: 32rpx;
		color: rgba(57, 57, 57, 1);
		font-weight: 900;
	}

	.row .input {
		-webkit-box-flex: 1;
		-webkit-flex: 1;
		flex: 1;
		font-size: 30rpx;
		color: #303133;
	}

	.row .icon-shouhuodizhi {
		font-size: 36rpx;
		color: #909399;
	}

	.isDefault-row {
		margin-top: 16rpx;
	}

	.isDefault-row .tit {
		-webkit-box-flex: 1;
		-webkit-flex: 1;
		flex: 1;
	}

	.isDefault-row switch {
		-webkit-transform: translateX(16rpx) scale(0.9);
		transform: translateX(16rpx) scale(0.9);
	}

	.add-btn {
		display: -webkit-box;
		display: -webkit-flex;
		display: flex;
		-webkit-box-align: center;
		-webkit-align-items: center;
		align-items: center;
		-webkit-box-pack: center;
		-webkit-justify-content: center;
		justify-content: center;
		width: 690rpx;
		height: 80rpx;
		margin: 60rpx auto;
		font-size: 32rpx;
		color: #fff;
		background-color: #fa436a;
		border-radius: 10rpx;
		-webkit-box-shadow: 1px 2px 5px rgba(219, 63, 96, 0.4);
		box-shadow: 1px 2px 5px rgba(219, 63, 96, 0.4);
	}
</style>
